<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>交易信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="cardBussi">
      <el-input v-model="form_busi.staff_business" size="medium" placeholder="请输入员工" clearable class="busi_input" @clear='input_clearSta'></el-input>
      <el-button type="primary" size="medium" class="busi_search" @click="btn_searchBusiness">查找</el-button>
      <el-button type="primary" size="medium" class="busi_create" @click="dialogBusiCreate=true">添加</el-button>
      <el-button type="success" size="medium" @click="exportExcel()" class="exprot">导出</el-button>
      <!-- 表格 -->
      <el-table id="out-table" :data="tableData_busi" :height="TableHeight " border style="width: 100%" class="table_busi">
        <el-table-column type="index" label="序列" width="50px">
        </el-table-column>
        <el-table-column prop="business_id" label="订单编号">
        </el-table-column>
        <el-table-column prop="pro_business" label="服务业务">
        </el-table-column>
        <el-table-column prop="vip_business" label="是否会员">
        </el-table-column>
        <el-table-column prop="staff_business" label="执行员工">
        </el-table-column>
        <el-table-column prop="money_business" label="交易金额">
        </el-table-column>
        <el-table-column prop="data_business" label="交易时间">
        </el-table-column>
        <el-table-column label="操作" v-if="purview">
          <template slot-scope="scope">
            <el-button @click="busiClick(scope.row)" type="primary" size="small" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" size="small" @click="deleBusi(scope.row)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加对话框 -->
      <el-dialog title="添加交易信息" :visible.sync="dialogBusiCreate" @close="handleClosebtn" @open="handOpenBtncreate">
        <el-form ref="formbusi" :model="busi_formdialog" label-width="70px">
          <el-form-item label="订单单号" prop="business_id">
            <el-input disabled v-model="busi_formdialog.business_id"></el-input>
          </el-form-item>
          <el-form-item label="服务业务" prop="pro_business">
            <el-select v-model="busi_formdialog.pro_business" placeholder="请选择" style="width: 100%;">
              <el-option label="剪发" value="剪发"></el-option>
              <el-option label="洗头" value="洗头"></el-option>
              <el-option label="刮脸" value="刮脸"></el-option>
              <el-option label="吹风" value="吹风"></el-option>
              <el-option label="烫发" value="烫发"></el-option>
              <el-option label="做发" value="做发"></el-option>
              <el-option label="染发" value="染发"></el-option>
              <el-option label="假发" value="假发"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否会员" prop="vip_business">
            <el-select v-model="busi_formdialog.vip_business" placeholder="请选择" style="width: 100%;">
              <el-option label="1" value="1"></el-option>
              <el-option label="0" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="执行员工" prop="staff_business">
            <el-input v-model="busi_formdialog.staff_business"></el-input>
          </el-form-item>
          <el-form-item label="交易金额" prop="money_business">
            <el-input v-model="busi_formdialog.money_business"></el-input>
          </el-form-item>
          <el-form-item label="交易时间" prop="data_business">
            <el-input disabled v-model="busi_formdialog.data_business"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogBusiCreate = false">取 消</el-button>
          <el-button type="primary" @click="dialogCreateBusi()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改对话框 -->
      <el-dialog title="修改交易信息" :visible.sync="dialogBusiUpdate">
        <el-form ref="tablebusiUpdate" :model="busi_tableUpdate" label-width="80px">
          <el-form-item label="订单编号">
            <el-input disabled v-model="busi_tableUpdate.business_id"></el-input>
          </el-form-item>
          <el-form-item label="服务业务">
            <el-input v-model="busi_tableUpdate.pro_business"></el-input>
          </el-form-item>
          <el-form-item label="是否会员">
            <el-input v-model="busi_tableUpdate.vip_business"></el-input>
          </el-form-item>
          <el-form-item label="执行员工">
            <el-input v-model="busi_tableUpdate.staff_business"></el-input>
          </el-form-item>
          <el-form-item label="交易金额">
            <el-input v-model="busi_tableUpdate.money_business"></el-input>
          </el-form-item>
          <el-form-item label="交易时间">
            <el-input disabled v-model="busi_tableUpdate.data_business"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogBusiUpdate = false">取 消</el-button>
          <el-button type="primary" @click="dialogBusiUpdateBtn">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
export default {
  name: 'BusinessInfo',
  data () {
    return {
      TableHeight: 0,
      form_busi: {
        staff_business: ''
      },
      tableData_busi: [],
      dialogBusiCreate: false,
      dialogBusiUpdate: false,
      // 添加对话框表单绑定数据
      busi_formdialog: {
        business_id: '',
        pro_business: '',
        vip_business: '',
        staff_business: '',
        money_business: '',
        data_business: ''
      },
      // 获取表格订单编号的最后一个
      tablLasteBusinessId: '',
      // 添加编导生成的订单编号
      tableNewBusinessId: '',
      // 修改对话框表单绑定数据
      busi_tableUpdate: {
        business_id: '',
        pro_business: '',
        vip_business: '',
        staff_business: '',
        money_business: '',
        data_business: ''
      },
      // 删除操作参数
      busiDelete: {
        business_id: ''
      },
      // 权限控制
      purview: '',
      pur: null
    }
  },
  methods: {
    // 表格信息
    async busiList () {
      const { data: res } = await this.$http.get('busiList')
      this.tableData_busi = res.data
      const lastresult = this.tableData_busi.map(item => item.business_id)
      this.tablLasteBusinessId = lastresult[lastresult.length - 1]
      const numBusiId = Number(this.tablLasteBusinessId) + 1
      const ess = (numBusiId + '').split()
      const resu = [String(numBusiId)]
      if (ess[0].length < 7) {
        for (let i = 0; i < 7 - ess[0].length; i++) {
          resu.unshift('0')
        }
      }
      this.tableNewBusinessId = resu.reduce((pre, cur) => pre + cur)

      // eslint-disable-next-line eqeqeq
      this.pur == 1 ? this.purview = true : this.purview = false
    },
    // 查找按钮
    async btn_searchBusiness () {
      const { data: res } = await this.$http.get('businessSearch', { params: this.form_busi })
      if (res.meta.status !== 200) {
        this.$message.error('搜索失败！')
      }
      this.$message.success('搜索成功！')
      this.tableData_busi = res.data
    },
    input_clearSta () {
      this.busiList()
    },
    // 表格修改按钮
    busiClick (row) {
      this.dialogBusiUpdate = true
      this.busi_tableUpdate = row
    },
    // 表格删除按钮
    async deleBusi (row) {
      this.busiDelete.business_id = row.business_id
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消')
      }
      const { data: res } = await this.$http.get('deleBusiness', { params: this.busiDelete })
      if (res.meta.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.busiList()
    },
    // 添加对话框关闭时调用
    handleClosebtn () {
      this.$refs.formbusi.resetFields()
    },
    // 添加对话框打开时调用
    handOpenBtncreate () {
      this.busi_formdialog.business_id = this.tableNewBusinessId
      const newDate = new Date()
      this.busi_formdialog.data_business = newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate()
    },
    // 添加对话框确定按钮
    dialogCreateBusi () {
      this.$refs.formbusi.validate(async vaild => {
        if (!vaild) return
        const { data: res } = await this.$http.post('busiCreate', this.busi_formdialog)
        if (res.meta.status !== 200) {
          this.$message.error('添加失败！')
        }
        this.$message.success('添加成功！')
        this.dialogBusiCreate = false
        this.busiList()
      })
    },
    // 修改对话框确定调用
    dialogBusiUpdateBtn () {
      this.$refs.tablebusiUpdate.validate(async vaild => {
        if (!vaild) return
        const { data: res } = await this.$http.post('businessUpdate', this.busi_tableUpdate)
        if (res.meta.status !== 200) {
          this.$message.error('修改失败！')
        }
        this.$message.success('修改成功！')
        this.dialogBusiUpdate = false
        this.busiList()
      })
    },
    // 表格导出
    exportExcel () {
      /* out-table关联导出的dom节点  */
      const wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      /* get binary string as output */
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '月末总结.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    }

  },
  created () {
    this.busiList()
    this.pur = window.localStorage.purview
    // 动态计算表格高度
    const windowHeight = document.documentElement.clientHeight || document.bodyclientHeight
    this.TableHeight = windowHeight - 210
  }
}
</script>

<style scoped lang='scss'>
.cardBussi {
  height: calc(100vh - 130px);
  margin-top: 10px;
}
.busi_input {
  width: 200px;
  margin-left: 80px;
}
.busi_search {
  margin-left: 10px;
}
.table_busi {
  margin-top: 20px;
}
.exprot {
  float: right;
}
</style>
